<template>
	<view class="container">
		<view class="header-wrapper">
			<view class="search-box">
				<u-search v-model="form.title" @search="titleConfirm()" :show-action="true" action-text="筛选" :animation="false" @custom="custom"></u-search>
<!-- 				<view style="padding-left: 30rpx;padding-right: 30rpx;">
					<u-form labelPosition="left" :model="form" ref="uForm" labelWidth="80">
						<u-form-item label="类型" prop="type">
							<u-input v-model="form.typeName" :border="true" type="select" @click="dirShow = true"
								placeholder="请选择课程类型"></u-input>
						</u-form-item>
						<u-form-item label="名称" prop="title">
							<u-input v-model="form.title" :border="true"
								@confirm="titleConfirm"
								placeholder="请输入课程名称"></u-input>
						</u-form-item>
					</u-form>
				</view> -->
			</view>
<!-- 			<view class="dropdown-box">
				<dropdown-screen :height="60" :listArr="listArr" :itemArr="itemArr" @finish="changeDropdown"></dropdown-screen>
			</view> -->
		</view>

		<view class="content-wrapper">
			<view class="card-item" v-for="(item, index) in list" :key="index"  @click="itemClick(index)">
				<view class="row">
					<view class="title">
						{{item.title || ''}}
					</view>
					<view class="desc">
						<view v-if="item.face" class="item1">
							面向:{{item.face || ''}}
						</view>
						<view class="item1">
							月龄:{{item.ageLow}}-{{item.ageHigh}}月
						</view>
						<view v-if="item.week" class="item1">
							周次:{{item.week || ''}}
						</view>
					</view>
					<view class="desc">
						<view v-if="item.textbook" class="item1">
							教材:{{item.textbook || ''}}
						</view>
						<view v-if="item.durations" class="item1">
							课堂时间:{{item.durations || ''}}
						</view>
					</view>
				</view>
<!-- 					<view class="cell">
					<view class="label">名称</view>
					<view class="info">{{item.title}}</view>
				</view>
				<view v-if="form.type === '0' || form.type === '1'" class="cell">
					<view class="label">面向</view>
					<view class="info">{{item.face}}</view>
				</view>
				<view class="cell">
					<view class="label">周次</view>
					<view class="info">{{item.week}}</view>
				</view>
				<view class="cell">
					<view class="label">教材</view>
					<view class="info">{{item.textbook}}</view>
				</view>
				<view class="cell">
					<view class="label">课堂时间</view>
					<view class="info">{{item.durations}}</view>
				</view>
				<view class="cell">
					<view class="label">月龄</view>
					<view class="info">{{item.ageLow}}-{{item.ageHigh}}月</view>
				</view> -->
			</view>
			<u-loadmore v-if="!emptyShow" :status="status" />
			<!-- <u-empty class="noContent" v-if="emptyShow" text="暂时没有课程哦～"  mode="list"></u-empty> -->
		</view>	

		<u-popup v-model="show" mode="right">
			<view style="padding-left: 30rpx;padding-right: 30rpx;">
				<u-form labelPosition="left" :model="form" ref="uForm" labelWidth="80">
					<u-form-item v-if="appType === 'app-tch' || appType === 'mp-tch'" label="类型" prop="type">
						<u-input v-model="form.typeName" :border="true" type="select" @click="dirShow = true"
							placeholder="请选择课程类型"></u-input>
					</u-form-item>
					<u-form-item label="月龄" prop="ageName">
						<u-input v-model="form.ageName" :border="true" type="select" @click="ageShow = true"
							placeholder="请选择月龄"></u-input>
					</u-form-item>
					<u-form-item v-if="form.type === 0 || form.type === 1" label="面向" prop="faceName">
						<u-input v-model="form.faceName" :border="true" type="select" @click="faceShow = true"
							placeholder="请选择面向"></u-input>
					</u-form-item>
					<u-form-item label="周次" prop="weekName">
						<u-input v-model="form.weekName" :border="true" type="select" @click="weekShow = true"
							placeholder="请选择周次"></u-input>
					</u-form-item>
				</u-form>
				<view style="display: flex;flex-direction: row;justify-content: space-between;">
					<u-button @click="clearConfirm" style="margin-top: 60rpx;">清空</u-button>
					<u-button @click="titleConfirm" style="margin-top: 60rpx;">确定</u-button>
				</view>
			</view>
		</u-popup>
		<u-select v-model="dirShow" :list="dirList"  @confirm="confirmType"></u-select>
		<u-select v-model="ageShow" :list="ageList" @confirm="confirmAge" value-name="value" label-name="text"></u-select>
		<u-select v-model="faceShow" :list="faceList" @confirm="confirmFace" value-name="value" label-name="text"></u-select>
		<u-select v-model="weekShow" :list="weekList" @confirm="confirmWeek" value-name="value" label-name="text"></u-select>
	</view>
</template>

<script>
	import { getCourseListV2, getCourseDict, getCourseListV2ByFamily, getCourseDictByFamily } from '@/api/course'
	import pageMixin from '@/mixins/page.js'
	import {
		mapState,
	} from 'vuex';
	export default {
		mixins: [pageMixin],
		computed: {
			...mapState({
				appType: state => state.app.appType,
			}),
		},
		data() {
			return {
				dirShow: false,
				dirList: [
					{
						value: '0',
						label: '机构端'
					},
					{
						value: '1',
						label: '家庭端'
					},
					{
						value: '2',
						label: '小群体课程'
					}
				],
								
				form: {
					type: 0,
					typeName: '机构端',
					title: '',
					age: '',
					ageName: '',
					face: '',
					faceName: '',
					week: '',
					weekName: ''
				},
				
				topHeight: 0,
				listArr: ['月龄','面向类别','周次'],
				itemArr: [[],[],[]],
				
				show: false,
				faceShow: false,
				ageShow: false,
				weekShow: false,
				ageList: [],
				faceList: [],
				weekList: []
			}
		},
		mounted(){
			let eleHeader = uni.createSelectorQuery().select(".header-wrapper")			
			eleHeader.boundingClientRect(data => {				
				this.topHeight = data.height				
			}).exec()				
		},
		onLoad(options) {
			console.log(getApp().globalData.channel);
			if (getApp().globalData.channel === 'xm') {
				
			} else {
				this.getList(this.page)
				this.getCourseDict();
			}
		},
		methods: {
			itemClick(index) {
				const item = this.list[index]
				// console.log(item);
				this.$u.route({
					url: '/pages_teach/teach/teach-detail-page',
					params: {
						id: item.id
					}
				})
			},
			getList(page) {
				const { } = this
				const params = {
					pageNum: page + 1,
					pageSize: 10,
					type: this.form.type,
					title: this.form.title,
					age: this.form.age,
					face: this.form.face,
					week: this.form.week
				}
				let f = getCourseListV2
				if (this.appType === 'app-p' || this.appType === 'mp-p') {
					f = getCourseListV2ByFamily
					params.type = 1
				}
				f(params).then(res => {
					this.setData(res);
				})
			},

			onReachBottom() {
				this.loadMore();
			},

			getCourseDict() {
				let f = getCourseDict
				if (this.appType === 'app-p' || this.appType === 'mp-p') {
					f = getCourseDictByFamily
				}
				f({ type: this.form.type}).then(res => {
					this.ageList = this.initDict(res.data.tc_month)
					this.faceList = this.initDict(res.data.tc_face)
					this.weekList = this.initDict(res.data.tc_week)
					// if (this.form.type === 2) {
					// 	this.listArr = ['月龄','周次']
					// 	this.itemArr = [ageList, weekList]
					// } else {
					// 	this.listArr = ['月龄','面向类别','周次']
					// 	this.itemArr = [ageList, faceList, weekList]
					// }
				})
			},
			
			initDict(data) {
				let list = []
				if (data) {
					list = data.map(x => {
						return {
							text: x.dictLabel,
							value: x.dictValue
						}
					})
				} 
				return list;
			},
			
			confirmType(res) {
				console.log(res);
				this.form.type = res[0].index;
				this.form.typeName = res[0].label;
				this.clearConfirm()
				this.getCourseDict()
			},
			changeDropdown(e) {
				if (this.form.type === 2) {
					if(e.$index==0){
						this.form.age = e.value
					}else if(e.$index==1){
						this.form.week = e.value
					}
				} else {
					if(e.$index==0){
						this.form.age = e.value
					}else if(e.$index==1){
						this.form.face = e.value
					}else if(e.$index==2){
						this.form.week = e.value
					}
				}
				this.page = -1;
				this.getList(this.page)
			},
			titleConfirm() {
				this.show = false;
				this.page = -1;
				this.getList(this.page)
			},
			
			clearConfirm() {
				this.form.age = '';
				this.form.ageName = '';
				this.form.face = '';
				this.form.faceName = '';
				this.form.week = '';
				this.form.weekName = '';
			},
			
			custom() {
				this.show = true
			},
			
			confirmAge(res) {
				console.log(res);
				this.form.age = res[0].value;
				this.form.ageName = res[0].label;
			},
			confirmFace(res) {
				console.log(res);
				this.form.face = res[0].value;
				this.form.faceName = res[0].label;
			},
			confirmWeek(res) {
				console.log(res);
				this.form.week = res[0].value;
				this.form.weekName = res[0].label;
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}

	.container{
		.item{
			border-radius: 20rpx;
			background-color: #FFFFFF;
			margin: $app-page-padding;
			padding: $app-page-padding;
			
			display: flex;
			flex-direction: column;
			
			.teacher-view{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20rpx;
				color: $app-font-color;
				font-size: 22rpx;
			}
			

		}
	}
	
	.card-item{
		.row{
			display: flex;
			flex-direction: column;
			padding: 20upx;
			
			.title{
				font-size: 30rpx;
				color: $app-font-color;
			}

			.desc{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: $app-font-desc-color;
				display: flex;
				flex-direction: row;
				
				.item1{
					margin-right: 15rpx;
				}
			}
		}
	}
</style>
